<template>
    <div class="goodsreg-root">
        <div class="reg-top">
            <div class="img-box"><img :src="skindItem.pics[0].img"></div>
            <p><span class="fa fa-rmb"></span><span>{{skindItem.price}}</span></p>
            <p>库存{{skindItem.stock}}件</p>
            <p v-show="!showallreg">
                      请选择 <span v-for="r in reg">
                        <span>{{r}} </span>
                      </span>
            </p>
            <p v-show="showallreg">
                已选 <span v-for="regitem in regArry">"{{regitem}} "</span>
            </p>
            <div class="close-reg" @click="closeReg"><span class="fa fa-times"></span></div>
        </div>
        <div class="reg-contain">
            <div v-for=" (r,i) in skindItem.reg" class="gualar-ctrl">
                <div v-for="(v,k) in r">
                    <p>{{k}}</p>
                    <div>
                        <span class="reg-item" :class="k"  v-for="g in v" @click="addReg($event,i,k)">{{g}}</span>
                    </div>
                </div>
            </div>
            <div class="buy-num">
                <p>购买数量</p>
                <div>
                    <span class="fa fa-minus reg-item jadd" @click="gnumClick(1)"></span>
                    <span>{{gnum}}</span>
                    <span class="fa fa-plus reg-item jadd" @click="gnumClick(2)"></span>
                </div>
            </div>
        </div>
        <div class="confirm" @click="chartClick">确定</div>
    </div>
</template>

<script>
import {mapState} from 'vuex';
export default {
    data:function(){
        return {
            gnum:1,
            reg:[],
            allchecked:false,
            regArry:[],
        }
    },
    computed:{
        showallreg:function(){
            var regnum = 0;
            for(var i=0;i<this.reg.length;i++){
                if(this.reg[i]==''){
                    regnum++;
                }
            }
            return regnum == this.reg.length;
        },
        ...mapState([
            "skindItem",
            "userinfo",
        ])
    },
    methods:{
        closeReg:function(){
            this.$store.commit("setShowCar",false);
        },
        addReg:function(e,i,k){
            // this.regArry = [];
            if(this.reg[i]==""){
                if(e.target.classList.length==3){
                    e.target.classList.remove("activereg");
                    this.reg.splice(i,1,k);
                }else{
                    document.getElementsByClassName(k+' activereg')[0].classList.remove("activereg");
                    e.target.classList.add("activereg");
                }
                
            }else{
                e.target.classList.add("activereg");
                this.reg.splice(i,1,'');
            }

            if(this.showallreg){
                this.regArry = [];
                var activeArry =document.getElementsByClassName("activereg");
                for(var i=0;i<activeArry.length;i++){
                    this.regArry.push(activeArry[i].innerText);
                }
            }
        },
        gnumClick:function(n){
            if(n==1){
                this.gnum--;
            }else{
                this.gnum++;
            }
            if(this.gnum<=1){
                this.gnum = 1;
            }
        },
        chartClick(){
            this.$store.dispatch("requestIslogin")
            if(!this.userinfo){
               layer.msg("亲还未登录");
            }else{
                var params = {
                    users:this.userinfo._id,
                    goods:this.skindItem._id,
                    reg:this.regArry,
                    gnum:this.gnum
                }
                this.$store.dispatch("requestChartAdd",params)
                .then(res=>{
                    if(!res.data.err){
                        this.$store.commit("setShowCar",false);
                        layer.msg(res.data.msg);
                    }
                });
            }
        }
    },
    mounted:function(){
        this.skindItem.reg.forEach((e)=> {
            for (var k in e) {
                this.reg.push(k);
            }
        });
        // console.dir(this.reg);
        this.$store.dispatch("requestIslogin")
    }
}
</script>

<style scoped>
.goodsreg-root{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    z-index: 10000;
    height: 65vh;
    /*overflow: hidden;*/
    background-color: white;
    padding: 10px;
}
.reg-contain{
    height: 278px;
    overflow-y: scroll;
}
.reg-box{
    width: 100%;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}
.img-box{
    position: absolute;
    top:-4vw;
    left: 4vw;
    width: 30vw;
    height: 30vw;
    border: 1px solid #999;
    padding: 3px;
    background-color: white;
}
.img-box img{
    width: 100%;
    height: 100%;
    text-align: center;
}
.reg-top{
    padding-bottom: 10px;
}
.reg-top p{
    margin-left: 38vw;
    font-size: 13px;
    line-height: 25px;
    text-align:left;
    margin-top:0;
    margin-bottom:0
}
.reg-top p:nth-of-type(1){
    color: #ee0000;
    font-size: 17px;
    font-family: "宋体";
}
.close-reg{
    position: absolute;
    top: 2vw;
    right: 3vw;
    color: #666;
    border: 1px solid #666;
    padding: 0 4px;
    border-radius: 50%;
}
.gualar-ctrl{
    width: 100%;
    border-bottom: 1px solid #eee;
    text-align:left;
    font-size:13px;
}
.gualar-ctrl p{
    margin: 5px 0;
}
.reg-item{
    display: inline-block;
    font-size: 12px;
    padding: 5px;
    border-radius: 5px;
    background-color: #eee;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    -moz-user-select: none;
}
.buy-num{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
}
.buy-num div{
    height:50px;
    line-height:50px;
}
.jadd{
    margin:0 10px;
    color: #999;
}
.confirm{
    width: 100vw;
    height: 45px;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: red;
    text-align: center;
    line-height: 45px;
    color: white;
}
.activereg{
    background-color: red;
    color: white;
}
</style>